<template>
    <a-modal :title="$t('创建目录')" v-model='isShow' @cancel='handleClose' width='480px' @ok='handleCreate'
        :cancelText="$t('Cancel')" :okText="$t('Sure')" :maskClosable='false' v-dragModal>
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-spin :spinning="loading">
                <a-form-model-item :label="$t('父目录')" prop="dir_name">
                    <a-input style="width:248px;" v-model="form.dir_name" :placeholder="$t('Enter') + $t('父目录')" />
                    <a-button style="margin-left: 16px;" type='primary' @click="handleChoose">
                        {{ $t('浏览') }}
                    </a-button>
                </a-form-model-item>
                <a-form-model-item :label="$t('文件夹名')" prop="fs_name">
                    <a-input v-model="form.fs_name" :placeholder="$t('Enter') + $t('文件夹名')" />
                </a-form-model-item>
            </a-spin>
        </a-form-model>
        <chooseDirectory ref="directoryRef" @choose-directory="handleDirectory" @current-directory="handleCurrent" />
    </a-modal>
</template>

<script>
import chooseDirectory from './chooseDirectory.vue';
export default {
    components: { chooseDirectory },
    data() {
        return {
            isShow: false,
            loading: false,
            labelCol: { span: 6 },
            wrapperCol: { span: 18 },
            form: {
                dir_name: '',
                fs_name: '',
            },
            rules: {
                dir_name: [
                    { required: true, message: this.$t('Enter') + this.$t('父目录'), trigger: 'blur' },
                ],
                fs_name: [
                    { required: true, message: this.$t('Enter') + this.$t('文件夹名'), trigger: 'blur' },
                ],
            },
            directory: '',
            id: '',
            level: '',
        };
    },
    methods: {
        handleCreate() {
            this.$refs.ruleForm.validate(async valid => {
                if (valid) {
                    this.loading = true
                    const { dir_name, fs_name } = this.form
                    const { data } = await this.$api.directory.createDirectoryApi({ dir_name: dir_name + '/' + fs_name})
                    this.model(data.id) //返回模板
                    this.notice(data.id, data.params, data.flag) //通知列表显示
                    if (data.flag == '0') {
                        this.$emit('get-list', dir_name, true)
                        this.handleClose()
                    }
                    this.loading = false
                } else {
                    return false;
                }
            });
        },
        handleClose() {
            this.$refs['ruleForm'].resetFields();
            this.isShow = false
        },
        handleChoose() {
            this.$refs.directoryRef.isShow = true
            if (this.id) this.$refs.directoryRef.test(this.directory, this.id, this.level)
        },
        handleDirectory(item) {
            this.form.dir_name = item
            this.$refs.ruleForm.validateField(['dir_name'])
        },
        handleCurrent(item, id, level) {
            this.directory = item
            this.id = id
            this.level = level
        }
    }
}
</script>